<template>
    <div class="amap-biaoji map-zoom" :style="{'height':mapHeight}">
        <el-amap :vid="'biaoji' + randomNum" :zoom="zoom"  :mapStyle="mapStyle" :center="center" :plugin="plugin" class="amap-demo" :style="{'height':mapHeight}">
            <el-amap-marker
                    v-for="(marker, index) in bagMarkers"
                    :position="marker.position"
                    :events="marker.events">
            </el-amap-marker>
            <el-amap-info-window
                    v-for="item in windows"
                    :position="item.position"
                    :visible="item.visible"
                    :content="item.content"
                    :events="item.events">
            </el-amap-info-window>
            <!--<template v-for="(polygon, index) in polygonsText">-->
                <!--<el-amap-text :text="polygon.contentRender"-->
                              <!--:events="polygon.events"-->
                              <!--v-if="polygon.isShow"-->
                              <!--textAlign="center"-->
                              <!--verticalAlign="center"-->
                              <!--:position="polygon.position">-->
                <!--</el-amap-text>-->
            <!--</template>-->
            <el-amap-polygon
                    v-for="(polygon, index) in polygonsEdit"
                    :path="polygon.path"
                    :fillOpacity="polygon.fillOpacity"
                    :strokeOpacity="polygon.strokeOpacity"
                    :strokeColor="polygon.borderColor"
                    :fillColor="polygon.bgColor"
                    :draggable="polygon.draggable"
                    :editable="polygon.editable"
                    :events="polygon.events">
            </el-amap-polygon>
        </el-amap>
        <div class="tuceng">
            <el-select v-model="mapStyle" placeholder="请选择主题" style="width: 100px;margin-left: 10px;">
                <el-option
                        v-for="item in themeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
    import color from '../../../init/color.js';  // 颜色js
    import {AMapManager} from "vue-amap";
    export default {
        data() {
            return {
                randomNum: Math.floor(Math.random() * 1000000000000000 + 1),
                amapManager: new AMapManager(),
                polygonsEdit: [], // 区域信息
                polygonsText: [], // 文本信息
                mapStyle: 'amap://styles/normal',
                themeData: [
                    {
                        label: '标准',
                        value: 'amap://styles/normal'
                    },
                    {
                        label: '远山黛',
                        value: 'amap://styles/whitesmoke'
                    },
                    {
                        label: '幻影黑',
                        value: 'amap://styles/dark'
                    },
                    {
                        label: '月光银',
                        value: 'amap://styles/light'
                    },
                    {
                        label: '草色青',
                        value: 'amap://styles/fresh'
                    },
                    {
                        label: '雅士灰',
                        value: 'amap://styles/grey'
                    },
                    {
                        label: '涂鸦',
                        value: 'amap://styles/graffiti'
                    },
                    {
                        label: '马卡龙',
                        value: 'amap://styles/macaron'
                    },
                    {
                        label: '靛青蓝',
                        value: 'amap://styles/blue'
                    },
                    {
                        label: '极夜蓝',
                        value: 'amap://styles/darkblue'
                    },
                    {
                        label: '酱籽',
                        value: 'amap://styles/wine'
                    }
                ],
                plugin: [],
                zoom: 11,
                center: [116.397428, 39.90923],
                windows: [],
                myValue: {},
                selectTip: null,
                bagMarkers:[]
            };
        },
        props: {
            mapHeight: {
                type: String,
                default: '400px'
            },
            orderChecked: {
                type: Array,
                default: () => {
                    return []
                }
            },
            areaData: {
                type: Array,
                default: ()=>{
                    return []
                }
            }
        },
        watch: {
            orderChecked:function(val) {
                this.getAllInfo(val)
            },
            // areaData:function () {
            //     this.initArea();
            // }
        },
        mounted() {
            this.center = JSON.parse(localStorage.getItem('lnglat'));
            this.initArea();
        },
        methods: {
            initArea() {  // 初始化地图
                const self = this;
                self.polygonsEdit = [];
                self.polygonsText = [];
                let areaList = self.areaData;
                for (let key in areaList) {
                    self.polygonsText.push({
                        isShow: true,
                        contentRender: areaList[key].name,
                        position: self.averageColRow(JSON.parse(areaList[key].area)),
                        events: {
                            click: () => {
                            }
                        }
                    });
                    self.polygonsEdit.push({
                        editable: false,
                        id: areaList[key].id,
                        contentRender: areaList[key].name,
                        draggable: false,
                        fillOpacity: "0.3",
                        strokeOpacity: "0.5",
                        // bgColor: color[key],
                        bgColor: 'rgba(255,255,255,0)',
                        // borderColor: color[key],
                        borderColor: 'blue',
                        path: areaList[key].area ? JSON.parse(areaList[key].area) : [],
                        events: {
                            click: () => {
                            }
                        }
                    });
                }
            },
            getSum(total, num) {
                return total + num;
            },  // 二维数组平均值函数
            averageColRow(arr) {
                let _this = this;
                let Max = 0;
                arr.map(function (item) {
                    Max = Math.max(Max, item.length);
                })
                let result = Array(Max).fill("")
                    .map(function (_e, outerIndex) {
                        return arr.map(function (e, innerIndex, input) {
                            return e[outerIndex]
                        }).filter(function (ele) {
                            return ele !== undefined
                        })
                    });

                let permutationArray = result.map(function (item) {
                    {
                        return item.filter(function (ele) {
                            return ele != 0;
                        })
                    }

                });
                return permutationArray.map(function (item) {
                    // console.info('平局值', item.reduce(_this.getSum,0)/item.length);
                    return item.reduce(_this.getSum, 0) / item.length;
                })

            },  // 二维数组平均值函数
            getAllInfo(val) {
                let self = this;
                val.forEach(item => {
                    this.bagMarkers.push(
                        {
                            id: item.id,
                            position:[item.delivery_lon,item.delivery_lat],
                            name: item.delivery_address,
                            type: 'collect',
                            events: {
                                click() {
                                    self.windows = [];
                                    self.windows = [{
                                        position: [item.delivery_lon,item.delivery_lat],
                                        content: `<div><p><span class="weight">DDID：</span>
                                            ${item['current_lat']},${item['express_number']}</p>
                                            <p><span class="weight">发件：</span>${item['pick_name']},
                                            ${item['pick_phone']},${item['pick_address']}</p>

                                            <p><span class="weight">收件：</span>${item['delivery_name']},
                                            ${item['delivery_phone']},${item['delivery_address']}</p>
                                            <p><span class="weight">状态：</span>${item['dispatch_status_link']}</p>
                                            <p>${item['updated_at']}</p></div>`,
                                        visible: true,
                                        events: {
                                            close() {
                                                self.windows[0].visible = false
                                            }
                                        }
                                    }]
                            }}
                        }
                    );
                });
            } // 获取标记 文字，司机等信息
        }
    };
</script>

<style lang="less" scoped>
    .amap-biaoji {
        height: 100%;
        position: relative;
        .tuceng{
            position: absolute;
            top: 10px;
            right: 0px;
        }
    }
</style>
